<template>
  <div class="container">
    <div style="display: flex; justify-content: space-between">
      <div style="display: flex">
        <h2>添加客户经理</h2>
        <div style="margin-left: 20px">
          <el-input
            v-model="search"
            clearable
            placeholder=""
            @clear="getBusinessList"
            size="small"
            style="width: 60%; margin-right: 10px; margin-top: 20px"
          ></el-input>
          <el-button
            @click="getBusinessList"
            type="primary"
            size="small"
            style="margin-right: 10px; margin-top: 20px"
            >查询</el-button
          >
        </div>
      </div>
      <div style="margin-right: 40px">
        <!-- <el-popover
          trigger="click"
          title="邀请"
          width="380"
          class="popover"
          placement="bottom"
        >
          <div style="text-align: left; padding: 25px 15px">
            <el-select v-model="select" slot="append">
              <el-option label="学校相关人员" value="1"></el-option>
            </el-select>
            <el-button slot="append" type="primary">复制链接</el-button>
          </div>

          <el-button
            size="small"
            type="primary"
            style="margin-top: 20px"
            slot="reference"
            >分享
          </el-button>
        </el-popover> -->
        <el-button
          @click="share"
          size="small"
          type="primary"
          style="margin-top: 20px"
          >点击复制分享链接
        </el-button>
        <el-button
          @click="add"
          size="small"
          type="primary"
          style="margin-top: 20px"
          >添加客户经理
        </el-button>
      </div>
    </div>
    <el-table
      :row-class-name="xxxTableRowClassName"
      v-loading="isLoading"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{
        background: 'rgba(61,157,255,0.05)',
        color: '#333333',
      }"
    >
      <el-table-column
        prop="userName"
        label="客户经理姓名"
        width="width"
        align="center"
      >
      </el-table-column>

      <el-table-column
        prop="uphone"
        label="联系人手机号"
        width="width"
        align="center"
      >
      </el-table-column>

      <el-table-column align="center" label="停用/启用" width="110">
        <template slot-scope="{ row }">
          <el-switch
            @change="openClose(row)"
            v-model="row.ustatus"
            active-color="#13ce66"
            :active-value="'0'"
            :inactive-value="'1'"
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="添加客户经理"
      :visible.sync="dialogVisible"
      width="700px"
      :closeon-click-modal="false"
    >
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="150px">
        <el-form-item label="姓名:" prop="uName">
          <el-input v-model="form.uName" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="uPhone">
          <el-input v-model="form.uPhone" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button
          size="small"
          :loading="submitLoading2"
          type="primary"
          @click="addsave"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <pagination-page @size="changeSize" @page="changePage" :total="total" />
  </div>
</template>

<script>
import {
  showCustom,
  banBusinessAccount,
  shareUrl,
  insertCustomerInformation,
} from "@/api/school/regionalManager/index.js";
import Decrypt from "@/utils/Decrypt";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      form: {
        uName: "",
        uPhone: "",
      },
      rules: {
        uName: [
          {
            required: true,
            message: "请输入管理员名字",
          },
        ],
        uPhone: [
          {
            required: true,
            message: "请输入手机号",
          },
          {
            min: 7,
            max: 11,
            message: "长度必须在7-11个之间",
            trigger: "blur", // 触发校验的时机是失去焦点
          },
        ],
      },
      submitLoading2: false,
      visible: false,
      disable: false,
      total: -1,
      page: {
        pageSize: 10,
        pageNum: 1,
      },
      tableData: [],
      isLoading: false,
      dialogVisible: false,
      search: "",
      copy: "",
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getBusinessList();
    this.getshareUrl();
  },
  methods: {
    add() {
      this.dialogVisible = true;
      (this.form = {
        uPhone: "",
        uName: "",
        uId: this.$store.state.user.USER_INFO.id,
      }),
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate();
        });
    },
    addsave() {
      // 对所有表单项进行统一校验
      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          this.submitLoading2 = true;
          let data = {
            ...this.form,
          };
          insertCustomerInformation(data).then((res) => {
            this.submitLoading2 = false;
            if (res.code == 200) {
              this.$message.success(res.message);
              this.dialogVisible = false;
              this.getBusinessList();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    //开关
    openClose(row) {
      this.isLoading = true;
      let data = {
        uId: row.userId,
      };
      banBusinessAccount(data).then((response) => {
        if (response.code === 200) {
          this.isLoading = false;
          this.getBusinessList();
        }
      });
    },

    getshareUrl() {
      let data = {
        uId: this.$store.state.user.USER_INFO.id,
      };
      shareUrl(data).then((res) => {
        if (res.code == 200) {
          let website = JSON.stringify(res.result);
          let website1 = website.substr(1); //删除首字符
          let website2 = website1.substring(0, website1.length - 1); //删除最后末字符
          this.copy = website2;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    share(val) {
      // 模拟 输入框
      let cInput = document.createElement("input");
      cInput.value = this.copy;
      document.body.appendChild(cInput);
      cInput.select(); // 选取文本框内容

      // 执行浏览器复制命令
      // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
      // Input要在正常的编辑状态下原生复制方法才会生效

      document.execCommand("copy");

      // 复制成功后再将构造的标签 移除
      document.body.removeChild(cInput);
      this.$message({
        type: "success",
        message: "复制成功",
      });
    },
    xxxTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    //商机列表
    getBusinessList() {
      let data = {
        userId: this.$store.state.user.USER_INFO.id,
        ...this.page,
        userName: this.search,
      };
      this.isLoading = true;
      showCustom(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result.list.map((item) => ({
            ...item,
            uphone: Decrypt(item.uphone),
          }));
          this.total = res.result.total;
          this.isLoading = false;
        }
      });
    },

    changeSize(size) {
      this.page.pageSize = size;
      this.getBusinessList();
    },
    changePage(page) {
      this.page.pageNum = page;
      this.getBusinessList();
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-table__row.statistics-warning-row {
  background: rgba(61, 157, 255, 0.05);
}
::v-deep .el-form-item__label {
  padding-left: 60px;
}
::v-deep .el-input__inner {
  border-radius: 4px 0px 0px 4px;
}

::v-deep .el-popover {
  border-radius: 30px;
}
</style>
